<template>
	<view class="task-list-item" :style="{background:bgColor?bgColor:'#fff'}">
		<img :src="'https://www.jk334.cn/img/'+subItem.icon" alt="" class="task-item-img" />
		<view class="task-item-content">
			<view class="task-content-title">
				{{subItem.appName}}
			</view>
			<view class="task-content-introduce">
				{{subItem.appName||''}}
			</view>
			<view class="task-content-participate-box">
				<text class="task-participate">300人参与</text>
				<img src="https://www.jk334.cn/img/grain.png" alt="" class="task-participate-icon" />
				<text class="task-participate-num">+15</text>
				<text class="task-participate-grain">粮</text>
			</view>
		</view>
		<view class="execute-task"
			:style="{background: subItem.status==0?'#FFCD2C':'rgba(254, 55, 95, 0.3)',color:subItem.status!='0'&&'#fff'}"
			@click="emitStatus">
			{{changeStatus(subItem.status)}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "taskItem",
		props: ['status', 'subItem', 'bgColor'],
		data() {
			return {};
		},
		computed: {
			changeStatus() {
				return (status) => {
					if (status == '0') {
						return '未领取'
					}
					return '已完成'
				}
			}
		},
		methods: {
			emitStatus() {
				if (this.subItem.status == 1) return
				this.$emit('setStatus')
			}
		}
	}
</script>

<style scoped lang="scss">
	.task-list-item {
		margin-top: 24rpx;
		padding: 12px 10px;
		height: 180rpx;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 12rpx;
		box-sizing: border-box;

		.task-item-img {
			width: 132rpx;
			height: 132rpx;
			border-radius: 8rpx;
			margin-right: 20rpx;
		}

		.task-item-content {
			flex: 1;
			font-family: PingFang SC, PingFang SC;

			.task-content-title {
				font-size: 26rpx;
				font-weight: bold;
				color: #323232;
				margin-bottom: 8rpx;
			}

			.task-content-introduce {
				font-size: 22rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 6rpx;
			}

			.task-content-participate-box {
				display: flex;
				align-items: center;

				.task-participate {
					width: 112rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					background: #FEF1EF;
					border-radius: 8rpx;
					margin-right: 20rpx;
					font-size: 10px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #D12225;
				}

				.task-participate-icon {
					width: 48rpx;
					height: 42rpx;

				}

				.task-participate-num {
					font-size: 16px;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #454545;
				}

				.task-participate-grain {
					font-size: 12px;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #454545;
				}
			}

		}

		.execute-task {
			width: 144rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			border-radius: 30rpx;
			font-size: 12px;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #393319;
		}
	}
</style>